<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OUIF : Inline Bar Graph</title>
<link rel="stylesheet" type="text/css" href="iGraph.css">
</head>
<body>
<h1>Inline Bar Graph</h1>
<h2>Paragraph Inline</h2>
<p>무궁화 꽃이 
	<span class="iGraph">
		<span class="gBar"><span class="gAction" style="width:50%"></span></span>
		<span class="gPercent"><strong>50</strong>%</span>
	</span> 
피었습니다.</p>
<h2>Unordered List</h2>
<ul>
	<li class="iGraph">
		<span class="gBar"><span class="gAction" style="width:10%"></span></span>
		<span class="gPercent"><strong>10</strong>%</span>
	</li>
	<li class="iGraph">
		<span class="gBar"><span class="gAction" style="width:20%"></span></span>
		<span class="gPercent"><strong>20</strong>%</span>
	</li>
</ul>
<h2>Ordered List</h2>
<ol>
	<li class="iGraph">
		<span class="gBar"><span class="gAction" style="width:10%"></span></span>
		<span class="gPercent"><strong>10</strong>%</span>
	</li>
	<li class="iGraph">
		<span class="gBar"><span class="gAction" style="width:20%"></span></span>
		<span class="gPercent"><strong>20</strong>%</span>
	</li>
</ol>
<h2>Definition List</h2>
<dl>
	<dt>A:</dt>
	<dd class="iGraph">
		<span class="gBar"><span class="gAction" style="width:20%"></span></span>
		<span class="gPercent"><strong>20</strong>%</span>
	</dd>
	<dt>B:</dt>
	<dd class="iGraph">
		<span class="gBar"><span class="gAction" style="width:20%"></span></span>
		<span class="gPercent"><strong>20</strong>%</span>
	</dd>
</dl>
<button type="button" onClick="$('link').attr('href', '')">CSS(X)</button>
<button type="button" onClick="$('link').attr('href', 'iGraph.css')">CSS(O)</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
</body>
</html>
